<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>book detail</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/book/bookDetail.js"></script>
	
<style type="text/css">
a:HOVER {
	/* color: #d43f3a; */
	/* color: #55B055; */
	color: #47A447;
	font-weight: bold;
	/* text-decoration: none; */
}
img {
	cursor: pointer;
}

.hd1 {
	position: fixed;
	z-index: 5;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #E4E3E5;
	background-color: #F3F3F3;
	font-size: 16px;
	font-weight: bold;
}
.hd1 .back {
	margin-left: 20px;
	font-size: 16px;
	font-weight: bold;
}
.hd1_temp {
	width: 100%;
	height: 50px;
}

/****** bookdetail ******/
#detail {
	/* height: 300px; */
	margin: 5px 10px 5px 10px;
	border: 2px solid #E4E3E5;
}
#detail .book_pic {
	border-right: 1px dashed #E4E3E5;
	width:20%;
	float: left;
}
#detail .book_pic .pic img {
	width:120px;
	height:150px;
	margin: 10px 0;
}
#detail .book_pic .opt {
	width:120px;
	margin: 10px 0;
}
#detail .book_info {
	border: 0px solid #E4E3E5;
	width:80%;
	float: left;
	padding: 10px 20px;
}
#detail .book_info dt, dd {
	height: 40px;
	font-size: 18px;
}
.hang .c {
	float: left;
	margin-right: 20px;
	
}
.hang .describe {
	width: 70%;
}
.hang .describe .text {
	font-size: 14px;
	color: gray;
}

/****** catalog list ******/
#catalog {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin: 5px 10px 5px 10px;
	/* width: 90%; */
	border: 1px solid #E4E3E5;
}
#catalog .pd {
	margin-bottom: 0px;
}
.ts {
	font-size: 18px;
	font-weight: bold;
}
.catalogList li {
	list-style: none;
	float: left;
	width: 20%;
}
.catalogList li div {
	height: 35px;
	line-height: 35px;
}

/****** bottom ******/
#bottom {
	height: 20px;
}
</style>
  </head>
  
<body>
  <div id="main" class="">
  	<div class="hd1" align="center">
  		<!-- <button type="button" class="pull-left btn btn-link back">back</button> -->
  		<a class="pull-left back" href="javascript:window.history.back();">back</a>
  		<span class="text-success">heading</span>
  		<!-- <div class="text">heading</div> -->
  	</div>
  	<div class="hd1_temp"></div>
  	<div class="content">
  		<div id="detail">
  			<div class="book_pic" align="center">
  				<div class="pic">
  					<img alt="图片" src="images/book/panlong.jpg">
  				</div>
  				<div class="opt">
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> 操作测试
					</button>
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> 操作测试
					</button>
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> 操作测试
					</button>
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> 操作测试
					</button>
  				</div>
  			</div>
  			<div class="book_info">
  				<dl>
  					<dt><span class="glyphicon glyphicon-book"></span> bookName</dt>
  					<dd class="hang">
						<div class="c"><span class="glyphicon glyphicon-user"></span> author：<a href="javascript:;">aName</a></div>
						<div class="c"><span class="glyphicon glyphicon-tasks"></span> atypea：<a href="javascript:;">tName</a></div>
						<div class="c"><span class="glyphicon glyphicon-flag"></span> number：aNumb</div>
  					</dd>
  					<dd class="hang">
  						<div class="c"><span class="glyphicon glyphicon-link"></span> catalotURL：www.59to.com/info/32355.html</div>
  					</dd>
  					<dd class="hang">
  						<div class="c"><span class="glyphicon glyphicon-time"></span> uploadTime：2013-11-12 1:45:08</div>
  					</dd>
  					<dd class="hang">
  						<div class="c describe">
  							<span class="glyphicon glyphicon-asterisk"></span> describe：
  							<span class="text">他是雇佣兵世界的王者，他是令各国元首头疼的兵王！为朋友，他甘愿两肋插刀；为亲人，不惜血溅五步！是龙，终要翱翔于九天之上，携风云之势，一路高歌猛进，混的风生水起。各种美女也都纷纷而至，护士、警花、御姐等等一段段迤逦的邂逅！</span>
  						</div>
  					</dd>
  				</dl>
  			  	<div></div>
  			</div>
  			<div style="clear: both;"></div>
  		</div>
  		<div id="catalog">
  			<div class="panel panel-default pd">
  				<div class="panel-heading ts" align="center">
  					<span class="glyphicon glyphicon-list"></span> book name catalog
  				</div>
  				<div class="panel-body catalogList">
  					<ul>
	  				<%
	  					for(int i=0;i<103;i++){
	  				 %>
		  				<li>
		  					<div id="title_<%=i %>" align="center" onmouseover="showBgColor(this)" onmouseout="hideBgColor(this)">
		  						<a href="javascript:void(<%=i%>);">少年那撒旦法撒旦法</a>
		  					</div>
		  				</li>
		  			<%
		  				}
		  			 %>
		  			</ul>
  				</div>
  				
  			</div>
  			<%-- <div id="catalogToolbal" align="center">你下噶sd卡发送到</div>
  			<div id="catalogList">
	  			<ul>
  				<%
  					for(int i=0;i<10;i++){
  				 %>
	  				<li>
	  					<div id="title_<%=i %>" align="center" onmouseover="showBgColor(this)" onmouseout="hideBgColor(this)">
	  						<a href="javascript:void(<%=i%>);">少年那撒旦法撒旦法</a>
	  					</div>
	  				</li>
	  			<%
	  				}
	  			 %>
	  			</ul>
  			</div> --%>
  		</div>
  		<div id="bottom"></div>
  	</div>
  	
  </div>
</body>
</html>
